<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <input type="text" v-model="message">
</div>
<script>
    var vm = Vue.createApp({
        data(){
            return{
                message:"hello world"
            }
        },
        beforeCreate(){
        //data数据初始化之前
            console.log("-----------beforeCreate-----------")
            console.log(this.message)
            console.log(this.$data)
            console.log(this.$el)
        },
        created(){
        //     data 已经注入到vm对象内
        //     工作中，往往在这个created方法中使用ajax请求获取服务端数据，并加载到data属性中
            console.log("-----------created-----------")
            console.log(this.message)
            console.log(this.$data)
            console.log(this.$el)
        },
        beforeMount() {
            //data数据渲染到html模版之前
            console.log("--------------beforeMount-------------")
            console.log(this.$el)
        },
        mounted(){
            console.log("--------------mounted已经执行了-------------")
            // 工作中，一般在这里写页面初始化的代码，在用户看到页面之前，修改html的代码
            console.log(this.$el)
        },
        beforeUpdate(){
        //     data 更新前的操作的钩子
            console.log("--------------beforeUpdate已经执行了-------------")
            console.log(this.message)//数据虽然改动了，但是还没有更新到html中
            console.log(this.$el.parentElement.innerHTML)
        },
        updated(){
            // 工作中，这里写的数据是改动过之后，同步保存到本地，或者通过ajax请求到数据库，保存数据
            console.log("--------------updated已经执行了-------------")
            console.log(this.message)
            console.log(this.$el.parentElement.innerHTML)
        }
    }).mount("#app")
</script>
</body>
</html>